<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/>

    <title>Login Form Fragment</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body>
<main class="container mt-3 mb-3" role="main">
    <!-- Login form template begins here -->
    <div class="d-flex flex-column justify-content-between m-auto" th:fragment="loginform">
        <div th:if="${delegatedAuthenticationProviderPrimary == null}">
            <div class="service-ui" th:replace="fragments/serviceui :: serviceUI">
                <a href="fragments/serviceui.html">service ui fragment</a>
            </div>
        </div>
        <div class="form-wrapper">
            <form action="login" id="fm1" method="post" th:object="${credential}">

                <div th:if="${existingSingleSignOnSessionAvailable}">
                    <i class="mdi mdi-alert-decagram"></i>&nbsp;
                    <span class="mdc-button__label"
                          th:utext="#{screen.welcome.forcedsso(${existingSingleSignOnSessionPrincipal.id},${registeredService.name})}"/>
                </div>
                <h3 class="text-center" th:unless="${existingSingleSignOnSessionAvailable}">
                    <i class="mdi mdi-security"></i>
                    <span th:utext="#{screen.welcome.instructions}">Enter your Username and Password:</span>
                </h3>

                <div class="banner banner-danger banner-dismissible" th:if="${#fields.hasErrors('*')}">
                    <p th:each="err : ${#fields.errors('*')}" th:utext="${err + ' '}">Example error</p>
                    <!--<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>-->
                </div>

                <section class="cas-field my-2=3">
                        <span th:if="${availableAuthenticationHandlerNames != null}">
                            <span th:if="${availableAuthenticationHandlerNames.size() > 1}">
                                <label for="source" th:utext="#{screen.welcome.label.source}">Source</label>
                                <div>
                                    <select class="form-control required"
                                            id="source"
                                            name="source"
                                            th:field="*{source}">
                                        <option th:each="handler : ${availableAuthenticationHandlerNames}"
                                                th:text="${handler}" th:value="${handler}">Source</option>
                                    </select>
                                </div>
                            </span>
                            <span th:if="${availableAuthenticationHandlerNames.size() == 1}">
                                <input id="source"
                                       name="source"
                                       th:value="${availableAuthenticationHandlerNames.get(0)}"
                                       type="hidden"/>
                            </span>
                        </span>
                </section>

                <section class="cas-field my-3">
                    <div class="mdc-text-field  d-flex">
                        <input autocomplete="off"
                               class="mdc-text-field__input"
                               id="username"
                               size="25"
                               th:accesskey="#{screen.welcome.label.netid.accesskey}"
                               th:disabled="${@casThymeleafLoginFormDirector.isLoginFormUsernameInputDisabled(#vars)}"
                               th:field="*{username}"
                               th:readonly="!${@casThymeleafLoginFormDirector.isLoginFormUsernameInputVisible(#vars)}"
                               th:value="${@casThymeleafLoginFormDirector.getLoginFormUsername(#vars)}"
                               type="text"/>
                        <label class="mdc-floating-label" for="username" th:utext="#{screen.welcome.label.netid}">Username</label>
                    </div>
                </section>

                <section class="cas-field my-3 mdc-input-group">
                    <div class="mdc-input-group-field mdc-input-group-field-append">
                        <div class="mdc-text-field  mdc-text-field--with-trailing-icon d-flex caps-check">
                            <input autocomplete="off" class="mdc-text-field__input pwd" id="password" size="25"
                                   th:accesskey="#{screen.welcome.label.password.accesskey}" th:field="*{password}"
                                   type="password"/>
                            <label class="mdc-floating-label" for="username"
                                   th:utext="#{screen.welcome.label.password}">Password</label>
                        </div>
                        <div class="mdc-text-field-helper-line caps-warn">
                            <p
                                    class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg text-danger">
                                <span th:utext="#{screen.capslock.on}"/>
                            </p>
                        </div>
                    </div>
                    <button class="reveal-password mdc-button mdc-button--raised mdc-input-group-append mdc-icon-button"
                            type="button">
                        <i class="mdi mdi-eye reveal-password-icon"></i>
                        <span class="sr-only">Toggle Password</span>
                    </button>
                </section>

                <section class="cas-field my-3">
                    <div th:each="entry: ${customLoginFormFields}">
                        <div>
                            <span th:text="#{${entry.value.messageBundleKey}}">Label</span>
                            <input class="form-control required" name="data"
                                   th:field="*{customFields[__${entry.key}__]}" type="text">
                            <p/>
                        </div>
                    </div>
                </section>

                <section class="cas-field"
                         th:if="${passwordManagementEnabled != null && passwordManagementEnabled && param.doChangePassword != null}">
                    <p>
                        <input id="doChangePassword" name="doChangePassword"
                               th:checked="${param.doChangePassword != null}"
                               type="checkbox" value="true"/>
                        <label for="doChangePassword" th:text="#{screen.button.changePassword}">Change Password</label>
                    </p>
                </section>

                <section class="cas-field" th:if="${rememberMeAuthenticationEnabled}">
                    <p>
                        <input id="rememberMe" name="rememberMe" type="checkbox" value="true"/>
                        <label for="rememberMe" th:text="#{screen.rememberme.checkbox.title}">Remember Me</label>
                    </p>
                </section>

                <section class="cas-field">

                    <div th:replace="fragments/recaptcha :: recaptchaToken"/>

                    <input name="execution" th:value="${flowExecutionKey}" type="hidden"/>
                    <input name="_eventId" type="hidden" value="submit"/>
                    <input name="geolocation" type="hidden"/>

                    <p th:if="${#request.getMethod().equalsIgnoreCase('POST')}">
                            <span th:each="entry : ${httpRequestInitialPostParameters}" th:remove="tag">
                                <span th:each="entryValue : ${entry.value}" th:remove="tag">
                                    <input th:name="${entry.key}" th:value="${entryValue}" type="hidden"/>
                                </span>
                            </span>
                    </p>
                </section>

                <div th:replace="fragments/submitbutton :: submitButton (messageKey='screen.welcome.button.login')"/>

            </form>

            <hr class="my-4"/>

            <div th:replace="fragments/pmlinks :: pmlinks"/>

            <script th:inline="javascript" type="text/javascript">
                /*<![CDATA[*/
                var i = /*[[@{#{screen.welcome.button.loginwip}}]]*/
                var j = /*[[@{#{screen.welcome.button.login}}]]*/
                    /*]]>*/
                    $(window).on('pageshow', function () {
                        $(':submit').prop('disabled', false);
                        $(':submit').attr('value', j);
                    });
                $(document).ready(function () {
                    $("#fm1").submit(function () {
                        $(":submit").attr("disabled", true);
                        $(":submit").attr("value", i);
                        return true;
                    });
                });
            </script>


        </div>
        <div th:replace="fragments/loginsidebar :: loginsidebar"/>
    </div>
    </div>
</main>
</body>
</html>
